/**
 * ng-resize 指令
 * 为元素添加可调整大小的功能
 *
 * 使用示例：
 * <div ng-resize
 *      resize-position="right-bottom"
 *      resize-direction="both"
 *      min-width="100"
 *      min-height="100"
 *      max-width="800"
 *      max-height="600"
 *      on-resize="onResize(width, height)">
 *   内容
 * </div>
 *
 * 参数说明：
 * @param {String} resizePosition - 拖拽手柄位置: 'right-bottom'(右下), 'left-top'(左上), 'right-top'(右上), 'left-bottom'(左下), 默认 'right-bottom'
 * @param {String} resizeDirection - 缩放方向: 'both'(双向), 'horizontal'(横向), 'vertical'(纵向), 默认 'both'
 * @param {Number} minWidth - 最小宽度，默认 50
 * @param {Number} minHeight - 最小高度，默认 50
 * @param {Number} maxWidth - 最大宽度，默认无限制
 * @param {Number} maxHeight - 最大高度，默认无限制
 * @param {Function} onResize - 大小改变时的回调函数，接收参数 (width, height)
 */

export default function ngResizeDirective() {
  return {
    restrict: 'A',
    scope: {
      resizePosition: '@?',
      resizeDirection: '@?',
      minWidth: '=?',
      minHeight: '=?',
      maxWidth: '=?',
      maxHeight: '=?',
      onResize: '&?'
    },
    link: function(scope, element) {
      // 初始化默认值
      scope.resizePosition = scope.resizePosition || 'right-bottom';
      scope.resizeDirection = scope.resizeDirection || 'both';
      scope.minWidth = scope.minWidth || 50;
      scope.minHeight = scope.minHeight || 50;
      scope.maxWidth = scope.maxWidth || Infinity;
      scope.maxHeight = scope.maxHeight || Infinity;

      // 确保元素有 position 属性
      var computedStyle = window.getComputedStyle(element[0]);
      if (computedStyle.position === 'static') {
        element.css('position', 'relative');
      }

      // 创建拖拽手柄
      var handle = angular.element('<div class="ng-resize-handle"></div>');

      // 根据位置设置手柄的 class
      var positionClass = 'ng-resize-handle-' + scope.resizePosition;
      handle.addClass(positionClass);

      // 根据方向设置手柄的样式
      if (scope.resizeDirection === 'horizontal') {
        handle.addClass('ng-resize-handle-horizontal');
      } else if (scope.resizeDirection === 'vertical') {
        handle.addClass('ng-resize-handle-vertical');
      }

      element.append(handle);
      element.addClass('ng-resizable');

      // 拖拽状态
      var isDragging = false;
      var startX, startY, startWidth, startHeight;

      // 鼠标按下事件
      handle.on('mousedown', function(e) {
        e.preventDefault();
        e.stopPropagation();

        isDragging = true;
        startX = e.clientX;
        startY = e.clientY;
        startWidth = element[0].offsetWidth;
        startHeight = element[0].offsetHeight;

        // 添加拖拽中的 class
        element.addClass('ng-resizing');

        // 添加全局事件监听
        angular.element(document).on('mousemove', onMouseMove);
        angular.element(document).on('mouseup', onMouseUp);
      });

      // 鼠标移动事件
      function onMouseMove(e) {
        if (!isDragging) return;

        e.preventDefault();

        var deltaX = e.clientX - startX;
        var deltaY = e.clientY - startY;

        // 根据位置调整增量方向
        if (scope.resizePosition === 'left-top' || scope.resizePosition === 'left-bottom') {
          deltaX = -deltaX;
        }
        if (scope.resizePosition === 'left-top' || scope.resizePosition === 'right-top') {
          deltaY = -deltaY;
        }

        var newWidth = startWidth;
        var newHeight = startHeight;

        // 根据方向计算新的尺寸
        if (scope.resizeDirection === 'both' || scope.resizeDirection === 'horizontal') {
          newWidth = startWidth + deltaX;
          newWidth = Math.max(scope.minWidth, Math.min(scope.maxWidth, newWidth));
        }

        if (scope.resizeDirection === 'both' || scope.resizeDirection === 'vertical') {
          newHeight = startHeight + deltaY;
          newHeight = Math.max(scope.minHeight, Math.min(scope.maxHeight, newHeight));
        }

        // 应用新尺寸
        if (scope.resizeDirection === 'both' || scope.resizeDirection === 'horizontal') {
          element.css('width', newWidth + 'px');
        }
        if (scope.resizeDirection === 'both' || scope.resizeDirection === 'vertical') {
          element.css('height', newHeight + 'px');
        }

        // 触发回调
        if (scope.onResize) {
          scope.$apply(function() {
            scope.onResize({
              width: newWidth,
              height: newHeight
            });
          });
        }
      }

      // 鼠标松开事件
      function onMouseUp() {
        if (!isDragging) return;

        isDragging = false;
        element.removeClass('ng-resizing');

        // 移除全局事件监听
        angular.element(document).off('mousemove', onMouseMove);
        angular.element(document).off('mouseup', onMouseUp);
      }

      // 清理
      scope.$on('$destroy', function() {
        handle.off('mousedown');
        angular.element(document).off('mousemove', onMouseMove);
        angular.element(document).off('mouseup', onMouseUp);
      });
    }
  };
}
